const path = require('path'); //引入node的path模块
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  // 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块， javaScript 执行入口文件
  entry: './main.js',
  output: {
      // 将入口所有依赖模块合并输出到一个bundle.js文件
      filename: 'bundle.js',
      // 将输出文件都放到dist目录下
      path: path.resolve(__dirname, './dist')
  },
  /***
   * Webpack不支持解析原生css文件，要支持非JavaScript类型的文件，需要使用Webpack的Loader机制
   * 需要使用modele的rules去匹配要执行的文件
   */
  module: {
    rules: [
      {
        // 用正则匹配要有该Loader转换的css文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      // 从.js文件中提取出来的.css文件的名称
      filename: `[name]_{contenthash:8}.css`
    }),
    new ParallelUglifyPlugin({
      uglifyJS: {},
      test: /.js$/g,
      include: [],
      exclude: [],
      cacheDir: '',
      workerCount: '',
      sourceMap: false
    }),
    new copyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname+'/static'),// 打包的静态资源目录地址
          to: 'static' // 打包到dist下面的static
        }
      ]
    })
  ]
}

/***
 * Loader 可以具有文件转换功能，配置里的modlue.rules数组去配置一组规则，告知webpack在遇到哪些文件时使用loader
 * 去加载和转换
 * 
 * Loader注意点：
 *  - use属性的值需要是一个由Loader名称组成的数组，Loader的执行顺序是由后到前
 *  - 每个Loader都可以通过URL querystring 的方式传入参数，例如 css-loader?minimize中的minimize告诉
 * css-loader要开启css压缩
 * 
 */
/**
 * Plugin用来扩展wepack功能，通过在构建流程里注入钩子实现
 * 
 * 
 */

/**
 * DevServer
 * webpack-dev-server 实时更新
 * 会启动8080端口服务，DevServer会将webpack构建的文件保存到内存中，意思说访问输出的文件时，必须通过
 * http服务访问，DevServer不会去管webpack.config.js里配置的output.path属性，所以访问bundle.js文件时
 * 路径应为： http://localhost:8080/bundle.js
 */